import React, { useState } from 'react';
import { Button, Flex, Table } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { IconButton, Iconify, SvgIcon } from '@/components/icon';

type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
  createTime: string;
  dbConfig: [];
  description: string;
  latestSyncTime: string;
  progress: number;
  status: string;
  type: string;
  updateTime: string;
  urls: [];
  _id: string;
  act: string;
}

interface Props {
  onDelete: (record: DataType) => void;
  onContinue: (record: DataType) => void;
  onSync: (record: DataType) => void;
  connectorList: [];
}

const connectorTable = ({ onDelete, onContinue, onSync, connectorList }: Props) => {
  console.log('connectorList=============', connectorList);

  const columns: TableColumnsType<DataType> = [
    {
      title: '全部类型',
      dataIndex: 'type',
      width: '200px',
      key: 'type',
    },
    {
      title: '名称',
      dataIndex: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
    },
    {
      title: '同步方式',
      dataIndex: 'cron',
    },
    {
      title: '最近同步',
      dataIndex: 'time',
      width: '200px',
    },
    {
      title: '操作',
      dataIndex: 'act',
      width: '200px',

      render: (_, record) => (
        <div className="flex cursor-pointer items-center space-x-8">
          <p
            onClick={() => {
              onSync(record);
            }}
          >
            同步
          </p>
          <p
            onClick={() => {
              onContinue(record);
            }}
          >
            编辑
          </p>
          <p
            onClick={() => {
              onDelete(record);
            }}
          >
            删除
          </p>
        </div>
      ),
    },
  ];

  const onRefresh = (record: DataType) => {
    console.log('refresh', record);
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  // Table.SELECTION_ALL,
  // Table.SELECTION_INVERT,
  // Table.SELECTION_NONE,
  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      {
        key: 'all',
        text: `全部类型  (${120})`,
      },
      {
        key: 'file',
        text: '文件',
      },
      {
        key: 'web',
        text: '网页',
      },
      {
        key: 'api',
        text: 'API',
        onSelect: (changeableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: 'data',
        text: '数据库',
        onSelect: (changeableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };

  return (
    <div>
      <Table<DataType>
        rowSelection={rowSelection}
        columns={columns}
        dataSource={connectorList}
        style={{ backgroundColor: '#FBFCFFB2' }}
      />
    </div>
  );
};

export default connectorTable;
